<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo"></div>
                    <div class="layout-nav">
                        <MenuItem name="1">
                        <Icon type="ios-navigate"></Icon>
                        Item 1
                        </MenuItem>
                        <MenuItem name="2">
                        <Icon type="ios-keypad"></Icon>
                        Item 2
                        </MenuItem>
                        <MenuItem name="3">
                        <Icon type="ios-analytics"></Icon>
                        Item 3
                        </MenuItem>
                        <MenuItem name="4">
                        <Icon type="ios-paper"></Icon>
                        Item 4
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Layout>
                <LeftMenu></LeftMenu>
                <Layout :style="{padding: '0 24px 24px',marginLeft: '200px'}">
                    <Breadcrumb :style="{margin: '24px 0'}">
                        <BreadcrumbItem>{{crumbData[0]}}</BreadcrumbItem>
                        <BreadcrumbItem>{{crumbData[1]}}</BreadcrumbItem>
                        <BreadcrumbItem>{{crumbData[2]}}</BreadcrumbItem>
                    </Breadcrumb>
                    <Content :style="{padding: '24px',  background: '#fff'}">
                        <router-view/>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>
import LeftMenu from '@/pages/main/components/LeftMenu'
export default {
    name: "Main",
    mounted() {
        console.log(this.$router.options.routes[2].children);
    },
    data() {
        return {
            crumbData:this.$store.state.breadCrumbItem
        };
    },
    components: {
        LeftMenu
    },
    
};
</script>
<style scoped>
.layout {
    /* border: 1px solid #d7dde4; */
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav {
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
</style>

